/**
 * @fileOverview This file only contains the BaseWidget class definition.
 * BaseWidget is the forefather class of each other class defined 
 * in this Widget Framework Library, therefore this file has to be included before
 * any other files that contain widget derived from BaswWidget.
 * @author GUI group 
 * @version 1.0 alpha
 */


/**
    Creates a new CSS parameters set.
    @class Represent all CSS parameters associated to any subclass of BaseWidget. 
    @constructor 
 */ 
function Param(){}

/**
* define super class for generic widget
*/
Param.prototype = {
    /** widget position on x-axis 
    *   @field 
    *   @type pixel
    *   @default 0
    */
    x:0,	
    /** widget position on y-axis 
    *   @field 
    *   @type pixel
    *   @default 0
    */
    y:0,				
    /** widget width dimension 
    *   @field 
    *   @type pixel
    *   @default 0
    */
    w:0,
    /** widget height dimension 
    *   @field 
    *   @type pixel
    *   @default 0
    */				
    h:0,			
    /** widget borderStyle css property
    *   @field 
    *   @type "solid"|other...
    */
    borderStyle:"",		
    /** widget border-size css property
    *   @field 
    *   @type pixel
    *   @default 0
    */
    borderDim:0,		
    /** widget border-style css property
    *   @field 
    *   @type hex (ex: "#FFFFFF")
    */
    borderColor:"",		
    /** widget background-image css property
    *   @field 
    *   @type URI (ex: "http://www.mydom.org/myimage.jpg")
    */
    backImage:"",		
    /** widget background-repeat css property
    *   @field 
    *   @type "repeat"|"no-repeat"|"repeat-x"|"repeat-y"
    */
    backImageRepeat:"no-repeat", 
    /** widget background-color css property
    *   @field 
    *   @type hex (ex: "#FFFFFF")
    */
    backColor:"",	
    /** widget font-size css property
    *   @field 
    *   @type pixel
    *   @default 12
    */    	
    fontSize:12,        
    /** widget font-weight css property
    *   @field 
    *   @type "bold"|900|800|...|100|"normal"
    */
    fontWeight:"",  
    /** widget font-style css property
    *   @field 
    *   @type "italic"|"normal"
    */
    fontStyle:"",		
    /** widget color css property
    *   @field 
    *   @type hex (ex: "#FFFFFF")
    */
    color:"",			
    /** widget z-index css property
    *   @field 
    *   @type integer
    *   @default 0
    */
    deep:0,		
    /** widget padding-top css property
    *   @field 
    *   @type pixel
    *   @default 4
    */
    paddingTop:4,		
    /** widget padding-bottom css property
    *   @field 
    *   @type pixel
    *   @default 4
    */
    paddingBottom:4,	
    /** widget padding-left css property
    *   @field 
    *   @type pixel
    *   @default 4
    */
    paddingLeft:4,		
    /** widget padding-right css property
    *   @field 
    *   @type pixel
    *   @default 4
    */
    paddingRight:4,
    /** widget position css property
    *   @field 
    *   @type "absolute"|"relative"|"fixed"
    *   @default fixed
    */
    positionType:"absolute"
}

/** @ignore */
function Avatar(){}

/**
    Base widget class, every other widget father
    @class widget with base functionalities
    @constructor 
    @param {String} Id The id of the widget
 */ 
function BaseWidget(Id){
    /** The id of the object that will be created with render() method 
    *   @field 
    *   @type "String"
    */
    this.id = Id;	
    /** The widget css parameters set associated 
    *   @field 
    *   @type Param
    */
    this.param = new Param();
    /** The flag that controls the drag&drop functionalities 
    *   @field 
    *   @type Param
    */
    this.draggable = false;
}

extend(BaseWidget,Avatar);

// BaseWidget methods and attributes definition
BaseWidget.prototype = {
    /** Minimum grid element dimension 
    *   @field 
    *   @type pixel
    *   @default 8
    */
    DIM_GRIGLIA: 8,
    /**
    *   Change x-axis and y-axis position.
    *   <br/>Set widget position (css property: top, left [position is relative by default])
    *   @param  {pixel|"center"} p1 the x-axis widget position
    *   @param  {pixel|"center"} p2 the y-axis widget position
    *   @returns {interger} 0 if parameter are valid -1 otherwise
    */
    setPosition: function(p1, p2) {

        if (typeof p1 == "number" && p1 > 1) {
            this.param.x = this.DIM_GRIGLIA * p1;
        } else if (typeof p1 == "string" && p1 == "center") {
            this.param.x = p1;
        } else {
            return -1;
        }

        if (typeof p2 == "number" && p2 > 1) {
            this.param.y = this.DIM_GRIGLIA * p2;
        } else if (typeof p2 == "string" && p2 == "center") {
            this.param.y = p2;
        } else {
            return -1;
        }

        return 0; // valid parameter
    },
    /**
    *   Change widget dimension.
    *   <br/>Set widget size (css property: width, height).
    *   <br/><b>Note:</b> the dimension will be multiplied by DIM_GRIGLIA
    *   @param  {pixel} p1 the widget width
    *   @param  {pixel} p2 the widget height
    *   @returns {interger} 0 if parameter are valid -1 otherwise
    */
    setDimension: function(p1, p2) {
        if (p1 > 1 && p2 > 0) {
            this.param.w = this.DIM_GRIGLIA * p1;
            this.param.h = this.DIM_GRIGLIA * p2;
            return 0;
        }
        return -1; // invalid parameter
    },
    /**
    *   Change border css property.
    *   <br/>Set border color width and style  (css property: border-size, border-color, border-style).
    *   <br/><b>Overload 1:</b> <i>setBorder(bdim)</i>
    *   <br/><b>Overload 2:</b> <i>setBorder(bdim,bcol)</i>
    *   @param  {pixel} bdim    The border size
    *   @param  {hex}   bcol    The border color
    *   @param  {String}bsty    The border style
    *   @returns {interger} 0 if parameter are valid -1 otherwise
    */
    setBorder: function(bdim, bcol, bsty) {
        switch (arguments.length) {
            case 3: F
                if (typeof bsty == "string") {
                    this.param.borderStyle = bsty;
                } else {
                    return -1;
                }
            case 2:
                if (typeof bcol == "string") {
                    this.param.borderColor = bcol;
                } else {
                    return -1;
                }
            case 1:
                if ((bdim > 0) && (typeof bdim == "number")) {
                    this.param.borderDim = bdim;
                    return 0;
                } else {
                    return -1;
                }
            default:
                return -1;
        }
    },
    /**
    *   Change font css property.
    *   <br/>Set font style, weight and size (css property: font-size, font-weight, font-style).
    *   <br/><b>Overload 1:</b> <i>setFont(fdim)</i>
    *   <br/><b>Overload 2:</b> <i>setFont(fdim,fwei)</i>
    *   @param  {pixel} fdim    The font size
    *   @param  {"bold"|"normal"|900|800|...|100}   fcol    The font weight
    *   @param  {String}fsty    The font style
    *   @returns {interger} 0 if parameter are valid -1 otherwise
    */
    setFont: function(fdim, fwei, fsty) {
        switch (arguments.length) {
            case 3:
                if (typeof arguments[2] == "string") {
                    this.param.fontStyle = arguments[2];
                } else {
                    return -1;
                }
            case 2:
                if (typeof arguments[1] == "string") {
                    this.param.fontWeight = arguments[1];
                } else {
                    return -1;
                }
            case 1:
                if ((typeof arguments[0] == "number") && (arguments[0] > 0)) {
                    this.param.fontSize = arguments[0];
                    return 0;
                } else {
                    return -1;
                }

                break;
            default:
                return -1;
                break;

        }
    },
    /**
    *   Change padding css property.
    *   <br/>Set padding size (css property: padding-top, padding-bottom, padding-left, padding-right).
    *   <br/><b>Overload 1:</b> <i>setPadding(pVert,pOriz)</i> 
    *   <br/><b>Overload 2:</b> <i>setPadding(pAll)</i>
    *   @param  {pixel} pTop        The padding-top property
    *   @param  {pixel} pBottom     The padding-bottom property
    *   @param  {pixel} pLeft       The padding-left property
    *   @param  {pixel} pRight      The padding-right property
    *   @returns {interger} 0 if parameter are valid -1 otherwise
    */
    setPadding: function(pTop, pBottom, pLeft, pRight) {	// set padding(css property: padding)
        switch (arguments.length) {
            case 1:
                if (typeof arguments[0] == "number") {
                    with (this.param) {
                        paddingTop = paddingBottom = paddingRight = paddingLeft = arguments[0];
                    }
                    return 0;
                } else {
                    return -1;
                }
            case 2:
                if (typeof arguments[0] == "number"
                  && typeof arguments[1] == "number") {
                    with (this.param) {
                        paddingTop = paddingBottom = arguments[0];
                        paddingRight = paddingLeft = arguments[1];
                    }
                    return 0;
                } else {
                    return -1;
                }
            case 4:
                if (typeof arguments[0] == "number"
                  && typeof arguments[1] == "number"
                  && typeof arguments[2] == "number"
                  && typeof arguments[3] == "number") {

                    with (this.param) {
                        paddingTop = arguments[0];
                        paddingBottom = arguments[1];
                        paddingRight = arguments[2];
                        paddingLeft = arguments[3];
                    }
                    return 0;
                } else {
                    return -1;
                }
            default:
                return -1;
        }
    },
    /**
    *   Change background css property.
    *   <br/>Set background color and/or image (css property: background-color,background-image).
    *   <br/><b>Overload 1:</b> <i>setPadding(pVert,pOriz)</i> 
    *   @param  {hex} bcol     The widget background color
    *   @param  {URI} bimg     The widget background image
    *   @returns {interger} 0 if parameter are valid -1 otherwise
    */
    setBackground: function(bcol, bimg) {	    // set background color and/or image (css property: background)
        switch (arguments.length) {
            case 2:
                if (typeof arguments[1] == "string") {
                    this.param.backImage = arguments[1];
                } else {
                    return -1;
                }
            case 1:
                if (typeof arguments[0] == "string") {
                    this.param.backColor = arguments[0];
                    return 0;
                } else {
                    return -1;
                }
            default:
                return -1;
        }
    },

    /**
    *   Change background-image css property.
    *   <br/>Set background image (css property: background-image).
    *   @param  {URI} bimg     The widget background image
    *   @returns {interger} 0 if parameter are valid -1 otherwise
    */
    setBackgroundImg: function(bimg) {	// set an image as background (css property: background-image)

        if (typeof arguments[0] == "string") {
            with (this.param) {
                backImage = arguments[0];
            }
        } else {
            return -1;
        }

        return 0;
    },

    /**
    *   Change background-repeat css property.
    *   <br/>Set background repeat (css property: background-repeat).
    *   @param  {"repeat"|"no-repeat"|"repeat-x"|"repeat-y"} brep     The widget background image repeat mode
    *   @returns {interger} 0 if parameter are valid -1 otherwise
    */
    setBackRepeat: function(brep) {	// set image background repeat mode (css property: background-repeat)

        if (typeof arguments[0] == "string") {
            with (this.param) {
                backImageRepeat = arguments[0];
            }
        } else {
            return -1;
        }

        return 0;
    },
    /**
    *   Change text color css property.
    *   <br/>Set widget text color (css property: color).
    *   @param  {hex} txtcol    The widget text color
    *   @returns {interger} 0 if parameter are valid -1 otherwise
    */
    setColor: function(txtcol) {	    // set text color (css property: color)

        if (typeof arguments[0] == "string") {
            with (this.param) {
                color = arguments[0];
            }
        } else {
            return -1;
        }

        return 0;
    },
    /**
    *   Change widget deep level.
    *   <br/>Set widget deep level changing z-index (css property: z-index).
    *   @param  {integer} deep    The widget z-index value
    *   @returns {interger} 0 if parameter are valid -1 otherwise
    */
    setDeepLevel: function(deep) {    //  set deep level (css property: z-index)

        if (typeof arguments[0] == "number") {
            with (this.param) {
                deep = arguments[0];
            }
        } else {
            return -1;
        }

        return 0;
    },
    /**
    *   Print widget parameters.
    *   <br/>Prints all widget css parameters in an alert windows
    *   <b>Note:</b> only usefull for debug
    */
    printParam: function() {      // utility method (debug)
        var tmp_str = "";

        for (var p in this.param) {
            tmp_str = tmp_str + p + ": " + this.param[p] + "\n";
            //tmp_str = tmp_str + p + ": " + eval("this."+p) + "\n"; // questo era molto più fico
        }

        alert(tmp_str);
    },

    //  fadein[bool](false): flag which actives fadein animation 
    //  inspeed["slow"|"fast"]("normal"): fadein or show animation speed
    //  fadeout[bool](false): flag which actives fadeout animation 
    //  outspeed["slow"|"fast"]("normal"): fadeout or hide animation speed
    /**
    *   Render method.
    *   <br/>takes care about creation, css settings and div fading (in/out).
    *   <br/>It also updates the graficState, applies d&d funcionalities
    *   and takes care about some other routines (defined in postRender()).
    *   <p> In order to change the HTML widget representation the games developer 
    *   shouldn't reimplement this function but getRenderString instead.</p>
    *   <p> Some widget needs a function to execute after the HTML is appended into the DOM,
    *   so the games developer has to rewrite postRender() function to this purpose.</p>
    *   <p>It is possible specify an inspeed and an outspeed even if fadein or fadeout is false:
    *   the time parameter will be used in show and hide transition.</p>
    *   
    *   @param  {String} [container="body"] DOM element where append this widget, such as "body" or "otherDivId"
    *   @param  {Boolean} [fadein=false]    flag which actives fadein animation 
    *   @param  {"slow"|"fast"} [inspeed="normal"] fadein or show animation speed
    *   @param  {Boolean} [fadeout=false]    flag which actives fadeout animation 
    *   @param  {"slow"|"fast"} [outspeed="normal"] fadeout or hide animation speed    
    *
    *   @see BaseWidget#deleteMe
    *   @see BaseWidget#getRenderString
    *   @see BaseWidget#postRender
    *   @see BaseWidget#hideMe
    *   @see BaseWidget#showMe
    *   @see BaseWidget#fadeInMe
    *   @see BaseWidget#fadeOutMe
    */
    render: function(container, fadein, inspeed, fadeout, outspeed) {
        var tmp_str = this.getRenderString();

        if (fadeout)
            $('#' + this.id).fadeOut(outspeed);
        else
            $('#' + this.id).hide(outspeed);
        // initially element is removed by default 
        // even if it wasn't previously in DOM 
        // (don't put any error anyway)
        $('#' + this.id).remove();

        if (container && container != "body")
            $('#' + container).append(tmp_str);
        else
            $('body').append(tmp_str);

        // element is hidden by default after is inserted in DOM
        $('#' + this.id).hide();
        document.graficStateArray[this.id] = this;
        if (this.postRender instanceof Function)
            this.postRender();

        // adding drag&drop functionalities    
        if (this.draggable) {
            var dSfn = this.dragStartFn;
            var dMfn = this.dragMoveFn;
            var dEfn = this.dragEndFn;
            // bind dragstart event
            /*
            if ((typeof this.dSfn) != undefined) {
            alert(this.dsfn);
            $('#' + this.id).bind('dragstart', this.dSfn);
            }
            */
            // bind a drag event, (default function update proxy position)
            if (this.dMfn != undefined) {
                //$('#' + this.id).bind('drag', this.dMfn); //non va su IE, se fosse click va invece
                $('#' + this.id).bind('drag', function(event) {
                    $( this ).css({
                        top: event.offsetY,
                        left: event.offsetX
                    });

                });
            }
            // bind dragend event
            if (this.dEfn != undefined) {
                $('#' + this.id).bind('dragend', this.dEfn);
            }
        }

        // element is shown even if it wasn't previously hidden
        if (fadein)
            $('#' + this.id).fadeIn(inspeed);
        else
            $('#' + this.id).show();


    },
    /**
    *   Prints inline css style.
    *   <br/>Prints inline css style associated to widget.
    *   <br/>Parameters are taken from param object inside BaseWidget
    *   @returns {String} inline style content
    */
    printInlineStyle: function() {    // method which returns tag "style" content
        var tmp_str = "display:inline-block;";    // default css property
        for (var p in this.param) {
            switch (p) {
                case "positionType":
                    tmp_str += "position:" + this.param[p] + ";";
                    break;
                case "y":
                    if (typeof this.param[p] == "number") {
                        tmp_str += "top:" + this.param[p] + "px;";
                    } else {   // this.param[p] value must be "center" (here we suppose param values are correct)
                        tmp_str += "top:" + ((document.body.clientHeight - this.param.w) / 2) + "px;";
                    }

                    break;
                case "x":
                    if (typeof this.param[p] == "number") {
                        tmp_str += "left:" + this.param[p] + "px;";
                    } else {   // this.param[p] value must be "center" (here we suppose param values are correct)
                        tmp_str += "left:" + ((document.body.clientWidth - this.param.w) / 2) + "px;";
                    }

                    break;
                case "deep":
                    tmp_str += "z-index:" + this.param[p] + ";";
                    break;
                case "w":
                    if (this.param[p] != 0)
                        tmp_str += "width:" + this.param[p] + "px;";
                    break;
                case "h":
                    if (this.param[p] != 0)
                        tmp_str += "height:" + this.param[p] + "px;";
                    break;
                case "color":
                    if (this.param[p] != "")
                        tmp_str += "color:" + this.param[p] + ";";
                    break;
                case "fontStyle":
                    if (this.param[p] != "")
                        tmp_str += "font-style:" + this.param[p] + ";";
                    break;
                case "fontWeight":
                    if (this.param[p] != "")
                        tmp_str += "font-weight:" + this.param[p] + ";";
                    break;
                case "fontSize":
                    if (this.param[p] != 0)
                        tmp_str += "font-size:" + this.param[p] + "px;";
                    break;
                case "borderStyle":
                    if (this.param[p] != "")
                        tmp_str += "border-style:" + this.param[p] + ";";
                    break;
                case "borderDim":
                    if (this.param[p] != 0)
                        tmp_str += "border-width:" + this.param[p] + "px;";
                    break;
                case "borderColor":
                    if (this.param[p] != "")
                        tmp_str += "border-color:" + this.param[p] + ";";
                    break;
                case "backColor":
                    if (this.param[p] != "")
                        tmp_str += "background-color:" + this.param[p] + ";";
                    break;
                case "backImage":
                    if (this.param[p] != "")
                        tmp_str += "background-image: url(" + this.param[p] + ");";
                    break;
                case "backImageRepeat":
                    if (this.param[p] != "")
                        tmp_str += "background-repeat: " + this.param[p] + ";";
                    break;
                case "paddingTop":
                    if (this.param[p] != 0)
                        tmp_str += "padding-top:" + this.param[p] + "px;";
                    break;
                case "paddingBottom":
                    if (this.param[p] != 0)
                        tmp_str += "padding-bottom:" + this.param[p] + "px;";
                    break;
                case "paddingLeft":
                    if (this.param[p] != 0)
                        tmp_str += "padding-left:" + this.param[p] + "px;";
                    break;
                case "paddingRight":
                    if (this.param[p] != 0)
                        tmp_str += "padding-right:" + this.param[p] + "px;";
                    break;
            }
        }

        return tmp_str;
    },
    /**
    *   Sets Drag&Drop functionlaties.
    *   <br/>Enables or Disables d&d fucnctionalities 
    *   and optionally sets callback functions for  "drag", "dragstart" and, "dragend"  event
    *   <b>Note:</b> all drag events can be used in order to include the jquery event.drag plugin
    *   @param  {Boolean} isDrag    The flag which enables d&d (disabled by default)
    *   @param  {Function} fnMove   The binder function for "drag" event 
    *                               <br />By default this function permits widget movements. 
    *                               <br />Each function used to substitute this one must implement d&d movement by itself
    *   @param  {Function} fnStart  The binder function for "dragstart" event
    *   @param  {Function} fnEnd    The binder function for "dragend" event
    *   @returns {interger} 0 if parameter are valid -1 otherwise
    */
    setDrag: function(isDrag, fnMove, fnStart, fnEnd) {

        if (typeof isDrag != "boolean")
            return -1;

        this.draggable = isDrag;
        if (isDrag == false)
            return 0;

        switch (arguments.length) {
            case 4:
                if (fnEnd instanceof Function)
                    this.dEFn = fnEnd;
                break;
            case 3:
                if (fnStart instanceof Function)
                    this.dSfn = fnStart;
                break;
            case 2:
                if (fnMove instanceof Function)
                    this.dMFn = fnMove;
                else {
                    this.draggable = false;
                    return -1;
                }
                break;
            default:
                {
                    return -1;
                }
                break;
        }
        return 0;

    },
    /**
    *   "drag" event binder function.
    *   <b>Note:</b> this function should be change through setDrag() method.
    *   @param  {DragEvent} event    The "drag" event (triggered by jquery event.drag plugin)
    *   @see BaseWidget#setDrag
    */
    dMfn: function(event) {
        $(this).css({ top: event.offsetY, left: event.offsetX });
        //alert($(this).css('height'));
    },
    /**
    *   "dragstart" event binder function.
    *   <b>Note:</b> this function should be change through setDrag() method.
    *   @param  {DragEvent} event    The "dragstart" event (triggered by jquery event.drag plugin)
    *   @see BaseWidget#setDrag
    */
    dSfn: function(event) {
    },
    /**
    *   "dragend" event binder function.
    *   <b>Note:</b> this function should be change through setDrag() method.
    *   @param  {DragEvent} event    The "dragend" event (triggered by jquery event.drag plugin)
    *   @see BaseWidget#setDrag
    */
    dEfn: function(event) {
    },
    /**
    *   Deletes object and removes it from DOM.
    *   <br/>This function also update the global grafic state
    *   @see BaseWidget#render
    *   @see BaseWidget#hideMe
    *   @see BaseWidget#showMe
    *   @see BaseWidget#fadeInMe
    *   @see BaseWidget#fadeOutMe
    */
    deleteMe: function() {    // method which deletes object and removes it from DOM (body)
        // remove element from global grafic array
        // delete document.graficStateArray[this.id];

        // then actually remove dom element
        $('#' + this.id).remove();
    },
    printId: function() {
        alert(this.id);
    },
    /**
    *   Removes all inner elements from widget body.
    *   @see BaseWidget#render
    *   @see BaseWidget#deleteMe
    *   @see BaseWidget#hideMe
    *   @see BaseWidget#fadeOutMe
    */
    emptyMe: function() {
        $('#' + this.id).empty();
    },
    /**
    *   Hides widget.
    *   <b>Note:</b> after hideMe() widget is still in DOM but its display css property is set to "hidden".
    *   @param  {"slow"|"fast"}[time="normal"]  The transition time 
    *   @see BaseWidget#render
    *   @see BaseWidget#deleteMe
    *   @see BaseWidget#showMe
    *   @see BaseWidget#fadeInMe
    *   @see BaseWidget#fadeOutMe
    */
    hideMe: function(time) {
        // method which hides object (body)
        if (typeof time == "string" && (time == "slow" || time == "fast") && !$.browser.msie)
            $('#' + this.id).hide(time);
        else
            $('#' + this.id).hide();
    },
    /**
    *   Shows widget.
    *   <b>Note:</b> if widget is already visible this function has no effet
    *   @param  {"slow"|"fast"}[time="normal"]  The transition time     
    *   @see BaseWidget#render
    *   @see BaseWidget#deleteMe
    *   @see BaseWidget#hideMe
    *   @see BaseWidget#fadeInMe
    *   @see BaseWidget#fadeOutMe
    */
    showMe: function(time) {
        // method which shows object (body)
        if (typeof time == "string" && (time == "slow" || time == "fast") && !$.browser.msie)
            $('#' + this.id).show(time);
        else
            $('#' + this.id).show();
    },
    /**
    *   Shows widget with a fade in effect.
    *   <b>Note:</b> if widget is already visible this function has no effet
    *   @param  {"slow"|"fast"}[time="normal"]  The transition time     
    *   @see BaseWidget#render
    *   @see BaseWidget#deleteMe
    *   @see BaseWidget#hideMe
    *   @see BaseWidget#showMe
    *   @see BaseWidget#fadeOutMe
    */
    fadeInMe: function(time) {
        // method which shows object (body)
        if (!$.browser.msie) {
            if (typeof time == "string" && time == "slow" || time == "fast")
                $('#' + this.id).fadeIn(time);
            else $('#' + this.id).fadeIn();
        } else $('#' + this.id).show();
    },
    /**
    *   Hides widget with a fade out effect.
    *   <b>Note:</b> after fadeOutMe() widget is still in DOM but its display css property is set to "hidden".
    *   @param  {"slow"|"fast"}[time="normal"]  The transition time     
    *   @see BaseWidget#render
    *   @see BaseWidget#deleteMe
    *   @see BaseWidget#hideMe
    *   @see BaseWidget#showMe
    *   @see BaseWidget#fadeOutMe
    */
    fadeOutMe: function(time) {
        // method which shows object (body)
        if (!$.browser.msie) {
            if (typeof time == "string" && (time == "slow" || time == "fast"))
                $('#' + this.id).fadeOut(time);
            else $('#' + this.id).fadeOut();
        } else $('#' + this.id).hide();
    },
    /**
    *   Binds javascript event (such as click or keydown) to framework widget event
    *   <b>Note:</b> this function has to be used before render() method is invoked otherwise has no effect till new render() invocation
    *   @param  {event} event The javascript event which has to be binded
    *   @param  {Function} callback The binder function
    *   @see BaseWidget#render
    *   @see BaseWidget#unbind
    */
    bind: function(event, callback) {
        //changed the live method to the bind method
        $("#" + this.id).bind(event, function() { callback(); });
    },
    /**
    *   Unbinds javascript event to framework widget event
    *   <b>Note:</b> if the unbinded javascript event wasn't binded this function has no effect
    *   @param  {event} event  The javascript event which has to be unbinded    
    *   @param  {Function} handler The function that is to be no longer executed
    *   @see BaseWidget#render
    *   @see BaseWidget#bind
    */
    unbind: function(event, handler) {
        //change the die method to the unbind method
        $("#" + this.id).unbind(event, handler);
    }

};